<template>
  <div>
    <div id="bg"></div>
    <div id="main_container">
      <router-link v-for="part in parts" :to="part.href" class="part">
        <div class="icon" :style="{backgroundImage: `url(${part.icon})`}"></div> {{part.name}}
      </router-link>
    </div>
  </div>
</template>
<script>
import icon0 from './RepairProject/assets/img/accraditation.png'
import icon1 from './RepairProject/assets/img/meeting.png'
import icon2 from './RepairProject/assets/img/ps.png'
import icon3 from './RepairProject/assets/img/mc.png'
import icon4 from './RepairProject/assets/img/research.png'
import icon5 from './RepairProject/assets/img/logistics.png'
import icon6 from './RepairProject/assets/img/assets.png'
import icon7 from './RepairProject/assets/img/news.png'
export default {
  data() {
    return {
      parts: [{
        name: '审批',
        icon: icon0,
        href: ''
      }, {
        name: '会议',
        icon: icon1,
        href: 'MeetIng'
      }, {
        name: '人事系统',
        icon: icon2,
        href: ''
      }, {
        name: '资金卡',
        icon: icon3,
        href: 'fundCard'
      }, {
        name: '科研平台',
        icon: icon4,
        href: 'scidentific'
      }, {
        name: '报修系统',
        icon: icon5,
        href: 'repair'
      }, {
        name: '资产管理',
        icon: icon6,
        href: 'assignManager'
      }, {
        name: '消息',
        icon: icon7,
        href: ''
      }],
    }
  },
  created() {
    this.Initialization()
  },
  methods: {
    Initialization() {
      let viewport = document.querySelector("meta[name=viewport]");
      let winWidths = window.innerWidth;
      let densityDpi = 640 / winWidths;
      densityDpi = densityDpi > 1 ? 300 * 640 * densityDpi / 640 : densityDpi;
      viewport.setAttribute('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport"');
    }
  },
  mounted() {
    this.$nextTick(() => {
      document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px'
    })
  }
}
</script>
<style lang="less" scoped>
@baseColor: #64A6F2;
#bg {
  width: 100%;
  height: 5rem;
  background: grey
}
#main_container {
  display: flex;
  flex-wrap: wrap;
  .part {
    width: 25%;
    text-align: center;
    font-size: .4rem;
    color: #515151;
    margin-top: .5rem;
    .icon {
      background-size: .8rem;
      background-position: center;
      background-repeat: no-repeat;
      height: 1.3rem;
    }
  }
}
</style>

